<template>
  <div class="questionnaire-fill-page">
    <van-nav-bar
      title="问卷填写"
      left-arrow
      @click-left="router.back()"
      fixed
      safe-area-inset-top
    />
    <div class="content-scroll">
      <div class="header">
        <div class="title">膀胱过度活动症患者症状评估表(OABSS)</div>
        <div class="desc">请您根据自己最近一周的排尿状态认真填写调查表，选择最符合您实际情况的选项。</div>
      </div>
      <div class="question-card">
        <div class="question-tag">
          <span v-if="currentQuestion.required" class="tag required">必填</span>
          <span v-if="currentQuestion.type === 'single'" class="tag single">单选</span>
          <span v-if="currentQuestion.type === 'multi'" class="tag multi">可多选</span>
          <span class="question-title" v-html="currentQuestion.title"></span>
        </div>
        <div v-if="currentQuestion.type === 'single'">
          <div v-for="(opt, idx) in currentQuestion.options" :key="idx" class="option-item" :class="{selected: answer[currentIndex] === idx}" @click="selectSingle(idx)">
            <span class="opt-num">{{ idx + 1 }}</span> {{ opt }}
          </div>
        </div>
        <div v-else-if="currentQuestion.type === 'multi'">
          <div v-for="(opt, idx) in currentQuestion.options" :key="idx" class="option-item" :class="{selected: answer[currentIndex]?.includes(idx)}" @click="selectMulti(idx)">
            <span class="opt-num">{{ idx + 1 }}</span> {{ opt }}
          </div>
        </div>
        <div v-else-if="currentQuestion.type === 'text'">
          <textarea v-model="answer[currentIndex]" class="text-answer" :placeholder="currentQuestion.placeholder || '请输入...'" />
        </div>
      </div>
      <div class="progress">{{ currentIndex + 1 }}/{{ questions.length }}</div>
    </div>
    <div class="footer-fixed">
      <div class="btn-group">
        <van-button type="primary" class="nav-btn" :disabled="currentIndex === 0" @click="prev">上一题</van-button>
        <van-button
          :type="isLast ? 'success' : 'primary'"
          class="nav-btn"
          :class="isLast ? 'btn-next-green' : 'btn-next-purple'"
          @click="nextOrSubmit"
        >
          {{ isLast ? '提交问卷' : '下一题' }}
        </van-button>
      </div>
    </div>
    <van-toast v-model:show="showToast" :message="toastMsg" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const questions = [
  {
    type: 'single',
    required: true,
    title: '白天排尿次数：从早晨起床到晚上入睡的时间内，小便的次数是多少？',
    options: ['≤7', '8~14', '≥15']
  },
  {
    type: 'single',
    required: false,
    title: '夜间排尿次数：从晚上入睡到早晨起床的时间内，因为小便起床的次数是多少？',
    options: ['0', '1', '2', '≥3']
  },
  {
    type: 'single',
    required: true,
    title: '尿急：是否有突然想要小便，同时难以忍受的现象发生？',
    options: ['无', '每周<1', '每周>1', '每日=1', '每日2-4', '每日≥5']
  },
  {
    type: 'multi',
    required: true,
    title: '什么时侯发生漏尿？<br/>（请选择与您情况相符的选项）',
    options: ['从不漏尿', '未能到达厕所就有尿液漏出', '在咳嗽或打喷嚏时漏尿', '在睡着时漏尿', '在活动或体育运动时漏尿', '在小便完和穿衣服时漏尿']
  },
  {
    type: 'text',
    required: true,
    title: '请补充其他症状或说明',
    placeholder: '请输入...' 
  }
]

const currentIndex = ref(0)
const answer = ref<any[]>([])
const showToast = ref(false)
const toastMsg = ref('')

const currentQuestion = computed(() => questions[currentIndex.value])
const isLast = computed(() => currentIndex.value === questions.length - 1)

function selectSingle(idx: number) {
  answer.value[currentIndex.value] = idx
}
function selectMulti(idx: number) {
  if (!Array.isArray(answer.value[currentIndex.value])) answer.value[currentIndex.value] = []
  const arr = answer.value[currentIndex.value]
  const i = arr.indexOf(idx)
  if (i === -1) arr.push(idx)
  else arr.splice(i, 1)
}
function prev() {
  if (currentIndex.value > 0) currentIndex.value--
}
function nextOrSubmit() {
  // 校验必填
  const q = questions[currentIndex.value]
  const a = answer.value[currentIndex.value]
  if (q.required) {
    if (q.type === 'single' && (a === undefined || a === null)) return show('请填写本题!')
    if (q.type === 'multi' && (!Array.isArray(a) || a.length === 0)) return show('请填写本题!')
    if (q.type === 'text' && (!a || !a.trim())) return show('请填写本题!')
  }
  if (isLast.value) {
    show('提交成功!')
    setTimeout(() => {
      router.replace('/assessment/questionnaire')
    }, 1200)
  } else {
    currentIndex.value++
  }
}
function show(msg: string) {
  toastMsg.value = msg
  showToast.value = true
}
</script>

<style scoped lang="scss">
.questionnaire-fill-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
//   background: #f3f6fd;
  position: relative;
}
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
//   background: #f3f6fd !important;
}
.content-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-top: 80px; // nav-bar高度
  padding-bottom: 120px; // 底部按钮高度，避免内容被遮挡
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-left: 16px;
  padding-right: 16px;
}
.footer-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 20;
  box-shadow: 0 -4px 24px #e3e3e3;
  padding: 0px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  background: #e3d8ff;
  padding: 32px 16px 20px 16px;
  border-radius: 12px 12px 12px 12px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}
.title {
  font-size: 36px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desc {
  font-size: 24px;
  color: #444;
  line-height: 1.6;
}
.question-card {
  min-height: 900px;
  background: #fff;
  border-radius: 24px;
//   margin: 0 0 24px 0;
  padding: 32px 16px 24px 16px;
  font-size: 30px;
  box-shadow: 0 4px 24px 0 #e3e3e3;
  width: 100%;
  box-sizing: border-box;
}
.question-tag {
  margin-bottom: 28px;
  font-size: 30px;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.tag {
  display: inline-block;
  border-radius: 16px;
  padding: 6px 22px;
  font-size: 26px;
  font-weight: 700;
  margin-right: 10px;
  letter-spacing: 1px;
}
.required {
  background: #ff4d6b;
  color: #fff;
}
.single {
  background: #3bb2ff;
  color: #fff;
}
.multi {
  background: #4e8cff;
  color: #fff;
}
.question-title {
  color: #222;
  font-size: 30px;
  font-weight: 700;
  margin-left: 6px;
}
.option-item {
  background: #f8f8ff;
  border-radius: 18px;
  border: 2.5px solid #e3e3e3;
  font-size: 28px;
  color: #222;
  padding: 26px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border 0.2s, background 0.2s, color 0.2s;
  min-height: 60px;
  box-sizing: border-box;
}
.option-item.selected {
  border: 2.5px solid #3bb2ff;
  background: #e3f2ff;
  color: #1976d2;
  font-weight: 700;
}
.opt-num {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f0f0f0;
  color: #888;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  line-height: 44px;
  margin-right: 20px;
}
.text-answer {
  width: 100%;
  min-height: 100px;
  font-size: 28px;
  border-radius: 12px;
  border: 2.5px solid #e3e3e3;
  padding: 16px;
  margin-top: 12px;
  resize: vertical;
  box-sizing: border-box;
}
.progress {
  font-size: 28px;
  color: #333;
  font-weight: 700;
  margin: 18px 0 0 0;
  text-align: center;
  letter-spacing: 2px;
}
.btn-group {
  display: flex;
  width: 100%;
  gap: 24px;
}
.nav-btn {
  flex: 1;
  font-size: 30px !important;
  height: 90px;
  border-radius: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.btn-next-purple {
  background: #7C5CFA !important;
  color: #fff !important;
  border: none !important;
}
.btn-next-green {
  background: #52C41A !important;
  color: #fff !important;
  border: none !important;
}
</style> 